import fs from 'fs-extra'
import path from 'path' // 路径字符串处理函数 __dirname 当前文件所在目录
import { defineConfig, loadEnv } from 'vite'
import viteCdnPlugin from 'vite-plugin-cdn-import'
import checker from 'vite-plugin-checker'
import viteCompression from 'vite-plugin-compression'
import { createHtmlPlugin } from 'vite-plugin-html'
import { viteMockServe } from 'vite-plugin-mock'
// const postcssPresetEnv = require('postcss-preset-env') // postcss预设环境 语法降级

function copyFile() {
  return {
    enforce: 'post',
    async writeBundle() {
      await fs.copy(
        path.resolve(__dirname, 'public'),
        path.join(__dirname, 'dist', 'public'),
      )
    },
  }
}

export default defineConfig(({ mode }) => {
  // mpm run dev --mode development  会将mode后面的值传入defineConfig中的mode参数
  const env = loadEnv(mode, process.cwd()) // process.cwd() 返回当前node进程执行时的工作目录
  /**
   * loadEnv 直接读取.env文件进行解析
   * 去process.cwd()目录下读取.env.[mode]文件进行解析
   * 覆盖掉.env文件中的同名变量
   */
  return {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'), // 配置路径别名
      },
    },
    server: {
      port: 9999,
      open: true,
      proxy: {
        '/api': {
          // 当请求路径以/api开头时，代理到target对应的域中http://localhost:3000
          target: 'http://localhost:3000',
          changeOrigin: true,
          rewrite: path => path.replace(/^\/api/, ''), // 是否重写请求路径
        },
      },
    },
    optimizeDeps: {
      // exclude: ['lodash-es'], // 当遇到lodash-es这个包的时候，不进行依赖预构建
      include: ['lodash-es'], // 当遇到lodash-es这个包的时候，进行依赖预构建 第三方包不是ESM规范，可以进行配置
    },
    envPrefix: 'VITE_', // vite默认会读取.env文件中，以VITE_开头的变量，作为环境变量
    css: {
      // css行为配置
      modules: {
        // 对css模块化地默认行为进行配置
        localsConvention: 'camelCase', // 修改生成地配置对象地key展示形式（驼峰/中划线）
        scopeBehaviour: 'local', // 修改css模块化地作用范围（全局/局部）
        generateScopedName: '[name]__[local]___[hash:base64:5]', // 修改生成地css模块化地类名
        hashPrefix: 'vite', // 修改生成地css模块化地类名hash前缀
        globalModulePaths: [
          path.resolve(__dirname, 'src/assets/css/global.css'),
        ], // 不对该路金下的css文件进行模块化处理
      },
      preprocessorOptions: {
        less: {
          math: 'always', // 允许在less中使用数学表达式
          globalVars: {
            // 全局变量
            '--primary-color': '#1DA57A',
          },
          additionalData: `@import "/assets/global.less";`, // 在所有less文件中引入全局样式
        },
      },
      devSourcemap: {
        // 是否为css生成sourcemap
        css: true,
        less: true,
      },
      // postcss: {
      //   plugins: [postcssPresetEnv()],
      // },
    },
    build: {
      minify: false,
      rollupOptions: {
        // rollup配置
        input: {
          main: path.resolve(__dirname, 'index.html'),
        }, // 入口文件
        output: {
          assetFileNames: '[name]-[hash][ext]',
          manualChunks: id => {
            if (id.includes('node_modules')) {
              return id
                .toString()
                .split('node_modules/')[1]
                .split('/')[0]
                .toString()
            }
          },
        },
      },
      assetsInlineLimit: 1024 * 10, // 小于4096字节地资源，会被转换为base64格式地内联资源
      outDir: 'dist', // 输出目录
      assetsDir: 'assets', // 静态资源输出目录
      emptyOutDir: true, // 构建时清空输出目录
    },
    plugins: [
      copyFile(),
      createHtmlPlugin({
        inject: {
          data: {
            title: env.VITE_APP_TITLE,
          },
        },
      }),
      env.VITE_ENV === 'development' && viteMockServe(),
      checker({
        typescript: true,
      }),
      viteCompression(),
      viteCdnPlugin({
        modules: [
          {
            name: 'lodash', // 配置哪些包需要cdn引入
            var: '_', // 引入的包名
            path: 'https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js', // cdn地址
          },
        ],
      }),
    ].filter(Boolean),
  }
})
